<template>
    <div class="boxrank">
        <div class="toptitle">
            <span>热门景区排行</span>
            <p></p>
        </div>
        <div  class="rankboxcs" ref="rankbox"></div>
    </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'
let rankbox = ref()
onMounted(()=>{
    let myCharts = echarts.init(rankbox.value);
    // 设置实例的配置项
    myCharts.setOption({
        xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
    })
    // console.log(rankbox);
})
</script>
<style scoped lang="scss"> 
.boxrank{
    height: 400px;
    .toptitle {
        height: 60px;
        p {
        margin-top: 10px;
        width: 68px;
        height: 7px;
        background: url('@/assets/image/screen/dataScreen-title.png') no-repeat;
        background-size: 100% 100%;
    }
        span {
            color: white;
        }
    }
    background: url('@/assets/image/screen/touristlb.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    height: 400px;
    .rankboxcs{
        height: 300px;
    }
}
</style>